<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 知识付费会员App</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
    <script>
        // 检测页面是否在iframe中打开
        window.onload = function() {
            if (window.self !== window.top) {
                // 页面在iframe中，移除iPhone容器样式
                var container = document.querySelector('.iphone-container');
                if (container) {
                    container.style.borderRadius = '0';
                    container.style.boxShadow = 'none';
                    container.style.border = 'none';
                }
            }
        };
    </script>
</head>
<body>
    <div class="iphone-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">
                <span>10:30</span>
            </div>
            <div class="status-bar-right">
                <i class="fas fa-signal mr-2"></i>
                <i class="fas fa-wifi mr-2"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>

        <!-- 页面内容 -->
        <div class="page-content">
            <!-- 顶部导航 -->
            <div class="flex justify-between items-center px-4 py-3">
                <h1 class="text-xl font-bold">探索</h1>
                <div class="flex">
                    <button class="mr-4"><i class="fas fa-search text-lg"></i></button>
                    <button><i class="fas fa-bell text-lg"></i></button>
                </div>
            </div>

            <!-- 会员卡 -->
            <div class="px-4 mb-6">
                <div class="rounded-xl overflow-hidden relative" style="background: linear-gradient(135deg, #6366f1, #3b82f6);">
                    <div class="p-4 text-white">
                        <div class="flex justify-between items-start">
                            <div>
                                <h3 class="text-lg font-bold">解锁全部精品课程</h3>
                                <p class="text-sm opacity-80 mt-1">加入VIP会员，畅享知识海洋</p>
                                <button class="bg-white text-blue-600 text-sm font-semibold px-4 py-2 rounded-lg mt-4">立即开通</button>
                            </div>
                            <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                <i class="fas fa-crown text-2xl text-yellow-300"></i>
                            </div>
                        </div>
                    </div>
                    <div class="absolute bottom-0 right-0">
                        <svg width="100" height="100" viewBox="0 0 100 100" fill="none">
                            <circle cx="80" cy="80" r="50" fill="rgba(255,255,255,0.1)"/>
                        </svg>
                    </div>
                </div>
            </div>

            <!-- 精选课程 -->
            <div class="px-4 mb-6">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-lg font-bold">精选课程</h2>
                    <a href="#" class="text-sm text-blue-500">查看全部 <i class="fas fa-chevron-right text-xs"></i></a>
                </div>
                <div class="overflow-x-auto flex -mx-4 px-4 pb-2">
                    <div class="course-card mr-3 flex-shrink-0" style="width: 220px;">
                        <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="人工智能基础" class="course-image">
                        <div class="course-info">
                            <div class="flex items-center mb-1">
                                <span class="vip-badge mr-2">VIP</span>
                                <span class="badge">AI</span>
                            </div>
                            <h3 class="course-title">人工智能基础入门</h3>
                            <p class="course-author">张教授 · AI研究员</p>
                            <div class="course-stats">
                                <span class="mr-3"><i class="fas fa-play-circle mr-1"></i> 24课时</span>
                                <span><i class="fas fa-user mr-1"></i> 2.3万人学习</span>
                            </div>
                        </div>
                    </div>
                    <div class="course-card mr-3 flex-shrink-0" style="width: 220px;">
                        <img src="https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="金融学基础" class="course-image">
                        <div class="course-info">
                            <div class="flex items-center mb-1">
                                <span class="vip-badge mr-2">VIP</span>
                                <span class="badge">金融</span>
                            </div>
                            <h3 class="course-title">个人理财与投资</h3>
                            <p class="course-author">李明 · 资深理财师</p>
                            <div class="course-stats">
                                <span class="mr-3"><i class="fas fa-play-circle mr-1"></i> 18课时</span>
                                <span><i class="fas fa-user mr-1"></i> 1.7万人学习</span>
                            </div>
                        </div>
                    </div>
                    <div class="course-card flex-shrink-0" style="width: 220px;">
                        <img src="https://images.unsplash.com/photo-1513258496099-48168024aec0?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="职场提升" class="course-image">
                        <div class="course-info">
                            <div class="flex items-center mb-1">
                                <span class="badge">职场</span>
                            </div>
                            <h3 class="course-title">高效职场沟通技巧</h3>
                            <p class="course-author">王教练 · 职场导师</p>
                            <div class="course-stats">
                                <span class="mr-3"><i class="fas fa-play-circle mr-1"></i> 12课时</span>
                                <span><i class="fas fa-user mr-1"></i> 8.5千人学习</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 热门专栏 -->
            <div class="px-4 mb-6">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-lg font-bold">热门专栏</h2>
                    <a href="#" class="text-sm text-blue-500">查看全部 <i class="fas fa-chevron-right text-xs"></i></a>
                </div>
                <div class="space-y-3">
                    <div class="bg-white rounded-xl p-3 flex">
                        <div class="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="商业思维" class="w-full h-full object-cover">
                        </div>
                        <div class="ml-3 flex-1">
                            <h3 class="font-semibold text-base">商业分析思维训练营</h3>
                            <p class="text-gray-500 text-sm mt-1">每周更新 · 已更新12期</p>
                            <div class="flex justify-between items-center mt-2">
                                <div class="flex items-center">
                                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="作者头像" class="w-5 h-5 rounded-full">
                                    <span class="text-xs text-gray-500 ml-1">陈经理</span>
                                </div>
                                <span class="text-xs text-blue-500">3.2万人已订阅</span>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl p-3 flex">
                        <div class="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="心理健康" class="w-full h-full object-cover">
                        </div>
                        <div class="ml-3 flex-1">
                            <h3 class="font-semibold text-base">情绪管理与心理健康</h3>
                            <p class="text-gray-500 text-sm mt-1">每周更新 · 已更新18期</p>
                            <div class="flex justify-between items-center mt-2">
                                <div class="flex items-center">
                                    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="作者头像" class="w-5 h-5 rounded-full">
                                    <span class="text-xs text-gray-500 ml-1">林心理师</span>
                                </div>
                                <span class="text-xs text-blue-500">2.8万人已订阅</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 推荐讲师 -->
            <div class="px-4 mb-6">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-lg font-bold">推荐讲师</h2>
                    <a href="#" class="text-sm text-blue-500">查看全部 <i class="fas fa-chevron-right text-xs"></i></a>
                </div>
                <div class="flex overflow-x-auto -mx-4 px-4 pb-2">
                    <div class="flex-shrink-0 w-24 mr-4 text-center">
                        <div class="w-16 h-16 mx-auto rounded-full overflow-hidden border-2 border-blue-500">
                            <img src="https://randomuser.me/api/portraits/men/82.jpg" alt="讲师头像" class="w-full h-full object-cover">
                        </div>
                        <h4 class="mt-2 text-sm font-medium">张教授</h4>
                        <p class="text-xs text-gray-500">AI研究</p>
                    </div>
                    <div class="flex-shrink-0 w-24 mr-4 text-center">
                        <div class="w-16 h-16 mx-auto rounded-full overflow-hidden border-2 border-blue-500">
                            <img src="https://randomuser.me/api/portraits/women/42.jpg" alt="讲师头像" class="w-full h-full object-cover">
                        </div>
                        <h4 class="mt-2 text-sm font-medium">王语文</h4>
                        <p class="text-xs text-gray-500">写作导师</p>
                    </div>
                    <div class="flex-shrink-0 w-24 mr-4 text-center">
                        <div class="w-16 h-16 mx-auto rounded-full overflow-hidden border-2 border-blue-500">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="讲师头像" class="w-full h-full object-cover">
                        </div>
                        <h4 class="mt-2 text-sm font-medium">李明</h4>
                        <p class="text-xs text-gray-500">理财专家</p>
                    </div>
                    <div class="flex-shrink-0 w-24 mr-4 text-center">
                        <div class="w-16 h-16 mx-auto rounded-full overflow-hidden border-2 border-blue-500">
                            <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="讲师头像" class="w-full h-full object-cover">
                        </div>
                        <h4 class="mt-2 text-sm font-medium">赵教练</h4>
                        <p class="text-xs text-gray-500">职场导师</p>
                    </div>
                    <div class="flex-shrink-0 w-24 text-center">
                        <div class="w-16 h-16 mx-auto rounded-full overflow-hidden border-2 border-blue-500">
                            <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="讲师头像" class="w-full h-full object-cover">
                        </div>
                        <h4 class="mt-2 text-sm font-medium">刘博士</h4>
                        <p class="text-xs text-gray-500">营养学</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="tab-bar">
            <div class="tab-bar-item active">
                <i class="tab-icon fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-compass"></i>
                <span>发现</span>
            </div>
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-graduation-cap"></i>
                <span>学习</span>
            </div>
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-crown"></i>
                <span>会员</span>
            </div>
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
</body>
</html> 